<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>练习条件渲染，列表渲染，表单，获取节点 | 诶无痕和诶有痕</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="语法v-once插值只渲染一次 12345678&lt;div&gt;    &lt;!-- msg可以改变 --&gt;    &lt;span  class&#x3D;&quot;text&quot;&gt;this is a dynamic sentence:&amp;#123;&amp;#123;msg&amp;#125;&amp;#125;&lt;&#x2F;span&gt;    &lt;!-- msg值在第一次选然后就不会改变了 --">
<meta property="og:type" content="article">
<meta property="og:title" content="练习条件渲染，列表渲染，表单，获取节点">
<meta property="og:url" content="http://example.com/2022/03/16/%E7%BB%83%E4%B9%A0%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%EF%BC%8C%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93%EF%BC%8C%E8%A1%A8%E5%8D%95%EF%BC%8C%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9/index.html">
<meta property="og:site_name" content="诶无痕和诶有痕">
<meta property="og:description" content="语法v-once插值只渲染一次 12345678&lt;div&gt;    &lt;!-- msg可以改变 --&gt;    &lt;span  class&#x3D;&quot;text&quot;&gt;this is a dynamic sentence:&amp;#123;&amp;#123;msg&amp;#125;&amp;#125;&lt;&#x2F;span&gt;    &lt;!-- msg值在第一次选然后就不会改变了 --">
<meta property="og:locale" content="zh_CH">
<meta property="article:published_time" content="2022-03-16T09:01:08.000Z">
<meta property="article:modified_time" content="2022-03-18T03:26:33.491Z">
<meta property="article:author" content="诶无痕和诶有痕">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/atom.xml" title="诶无痕和诶有痕" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 5.4.1"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">诶无痕和诶有痕</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://example.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-练习条件渲染，列表渲染，表单，获取节点" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2022/03/16/%E7%BB%83%E4%B9%A0%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%EF%BC%8C%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93%EF%BC%8C%E8%A1%A8%E5%8D%95%EF%BC%8C%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9/" class="article-date">
  <time datetime="2022-03-16T09:01:08.000Z" itemprop="datePublished">2022-03-16</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      练习条件渲染，列表渲染，表单，获取节点
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h1><h2 id="v-once"><a href="#v-once" class="headerlink" title="v-once"></a>v-once</h2><p>插值只渲染一次</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;!-- msg可以改变 --&gt;</span><br><span class="line">    &lt;span  class=&quot;text&quot;&gt;this is a dynamic sentence:&#123;&#123;msg&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;!-- msg值在第一次选然后就不会改变了 --&gt;</span><br><span class="line">    &lt;span v-once  class=&quot;text&quot;&gt;this is a static sentence:&#123;&#123;msg&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;!-- 双向绑定 --&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; v-model=&quot;msg&quot; placeholder=&quot;请输入somthing&quot;&gt;</span><br><span class="line">  &lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h2 id="动态渲染html样式"><a href="#动态渲染html样式" class="headerlink" title="动态渲染html样式"></a>动态渲染html样式</h2><p>你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值</p>
<h3 id="v-html"><a href="#v-html" class="headerlink" title="v-html"></a>v-html</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;p&gt;Using mustaches: &#123;&#123; rawHtml &#125;&#125;&lt;/p&gt;</span><br><span class="line">&lt;p&gt;Using v-html directive: &lt;span v-html=&quot;rawHtml&quot;&gt;&lt;/span&gt;&lt;/p&gt;</span><br></pre></td></tr></table></figure>
<h2 id="mustache语法与attribute"><a href="#mustache语法与attribute" class="headerlink" title="mustache语法与attribute"></a>mustache语法与attribute</h2><p>Mustache 语法不能作为属性值,但可以将属性与v-bind:结合后,将变量世界作为属性值,就可以形成动态绑定</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;span v-html=&quot;styles&quot;&gt;&#123;&#123;styles&#125;&#125;&lt;/span&gt;</span><br></pre></td></tr></table></figure>
<h2 id="javascript表达式"><a href="#javascript表达式" class="headerlink" title="javascript表达式"></a>javascript表达式</h2><p>表达式可以直接写在mustache语法中。例如：NaN</p>
<p>模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。</p>
<h2 id="动态参数"><a href="#动态参数" class="headerlink" title="动态参数"></a>动态参数</h2><p>可以用来绑定属性，也可用用来绑定事件<br>这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;a v-bind:[attributeName]=&quot;url&quot;&gt; ... &lt;/a&gt;</span><br></pre></td></tr></table></figure>
<p>动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。</p>
<h2 id="修饰符"><a href="#修饰符" class="headerlink" title="修饰符"></a>修饰符</h2><p>修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。<br>例如：.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;form v-on:submit.prevent=&quot;onSubmit&quot;&gt;...&lt;/form&gt;</span><br></pre></td></tr></table></figure>
<h1 id="Class与Style的绑定"><a href="#Class与Style的绑定" class="headerlink" title="Class与Style的绑定"></a>Class与Style的绑定</h1><h2 id="对象语法"><a href="#对象语法" class="headerlink" title="对象语法"></a>对象语法</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 普通命名方式不用再次加引号，但这样的&#x27;text-a&#x27;要使用引号包裹 --&gt;</span><br><span class="line">    &lt;!-- 对象中可以只放一个键值对，也可以有多个键值对 --&gt;</span><br><span class="line">    &lt;!-- 当isShow的值是true时这个class名就会显示，反之不显示 --&gt;</span><br><span class="line">    &lt;!-- 因为这时动态绑定，所以要使用v-bind: --&gt;</span><br><span class="line">    &lt;span v-bind:class=&quot;&#123;class1:isShow,&#x27;text-live&#x27;:isShow&#125;&quot;&gt;123s&lt;/span&gt;</span><br></pre></td></tr></table></figure>
<p>也可以将动态绑定的值换成一个变量，如下：(只要变量中value为true就会显示对应的class名了)</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;span v-bind:class=&quot;checkClass&quot;&gt;123s&lt;/span&gt;</span><br><span class="line"></span><br><span class="line">checkClass:&#123;class1:true,&#x27;text-live&#x27;:true&#125;</span><br></pre></td></tr></table></figure>
<p>也可以通过计算属性返回一个处理过的对象</p>
<h2 id="数组语法"><a href="#数组语法" class="headerlink" title="数组语法"></a>数组语法</h2><p>动态绑定一个数组，数组中元素（变量）的值是什么，那么class就会后对应的class名，如果元素（变量）为空则不会添加这个class名</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;span v-bind:class=&quot;[a,b,c]&quot;&gt;123s&lt;/span&gt;</span><br></pre></td></tr></table></figure>
<p>当然这种设置class的方式也可以用在组件上</p>
<h1 id="对象语法-1"><a href="#对象语法-1" class="headerlink" title="对象语法"></a>对象语法</h1><p>可以通过以下方式动态绑定内联样式。当然直接绑定一个对象会更好。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;div v-bind:style=&quot;&#123; color: activeColor, fontSize: fontSize + &#x27;px&#x27; &#125;&quot;&gt;&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">data: &#123;</span><br><span class="line">  activeColor: &#x27;red&#x27;,</span><br><span class="line">  fontSize: 30</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>对象语法常常结合返回对象的计算属性使用。</p>
<h2 id="自动添加前缀"><a href="#自动添加前缀" class="headerlink" title="自动添加前缀"></a>自动添加前缀</h2><p>当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。</p>
<h1 id="条件渲染"><a href="#条件渲染" class="headerlink" title="条件渲染"></a>条件渲染</h1><h2 id="v-if"><a href="#v-if" class="headerlink" title="v-if"></a>v-if</h2><h2 id="v-else"><a href="#v-else" class="headerlink" title="v-else"></a>v-else</h2><h2 id="v-else-if"><a href="#v-else-if" class="headerlink" title="v-else-if"></a>v-else-if</h2><p>v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。<br>条件为true时显示，反之不显示。这些元素一般用于兄弟元素之间</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;div v-if=&quot;msg === &#x27;A&#x27;&quot;&gt;</span><br><span class="line">      A</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div v-else-if=&quot;msg === &#x27;B&#x27;&quot;&gt;</span><br><span class="line">      B</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div v-else-if=&quot;msg === &#x27;C&#x27;&quot;&gt;</span><br><span class="line">      C</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div v-else&gt;</span><br><span class="line">      Not A/B/C</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; v-model=&quot;msg&quot;&gt;</span><br></pre></td></tr></table></figure>
<h3 id="用key管理可复用的元素"><a href="#用key管理可复用的元素" class="headerlink" title="用key管理可复用的元素"></a>用key管理可复用的元素</h3><p>用key管理可复用（key是一个标记，这个标记最好是唯一的，能提高效率，判断能否复用这个标记）</p>
<h2 id="v-show"><a href="#v-show" class="headerlink" title="v-show"></a>v-show</h2><p>根据条件展示元素的选项是 v-show 指令。使用方法和v-if类似,值为true时显示，反之隐藏</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1 v-show=&quot;ok&quot;&gt;Hello!&lt;/h1&gt;</span><br></pre></td></tr></table></figure>
<p>v-show是通过display样式实现显示和隐藏，v-if是通过创建和删除节点来实现显示和隐藏。<br>这也就是说v-if是条件为true时才会渲染，v-show总是会被渲染。<br>所以v-show开销小，常用于频繁切换的节点。v-if则适合用于隐藏广告等。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">注意，v-show 不支持 &lt;template&gt; 元素，也不支持 v-else。</span><br></pre></td></tr></table></figure>
<h2 id="v-if-和v-for"><a href="#v-if-和v-for" class="headerlink" title="v-if 和v-for"></a>v-if 和v-for</h2><p>v-if和v-for不建议同时使用，因为v-for有更高的优先级。</p>
<h3 id="v-for与v-if一同使用"><a href="#v-for与v-if一同使用" class="headerlink" title="v-for与v-if一同使用"></a>v-for与v-if一同使用</h3><p>注意我们不推荐在同一元素上使用 v-if 和 v-for。<br>当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，</p>
<h1 id="列表渲染"><a href="#列表渲染" class="headerlink" title="列表渲染"></a>列表渲染</h1><h2 id="v-for的使用"><a href="#v-for的使用" class="headerlink" title="v-for的使用"></a>v-for的使用</h2><p>遍历的对象可以是数组也可以是对象，一般都要和key连用。<br>v-for 还支持一个可选的第二个参数，即当前项的索引，例如：v-for=”（item  ，index）in list”<br>下面遍历的是数组：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul &gt;</span><br><span class="line">    &lt;li v-for=&quot;item in list&quot; :key=&quot;item&quot;&gt;&#123;&#123;item&#125;&#125;&lt;/li&gt;</span><br><span class="line">&lt;/ul&gt;</span><br></pre></td></tr></table></figure>
<p>你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;div v-for=&quot;item of items&quot;&gt;&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p>下面遍历对象：<br>value:是值，key是键，index：是索引</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul &gt;</span><br><span class="line">    &lt;li v-for=&quot;(value,key,index) in list&quot; :key=&quot;item&quot;&gt;&#123;&#123;key&#125;&#125;:&#123;&#123;value&#125;&#125;:&#123;&#123;index&#125;&#125;&lt;/li&gt;</span><br><span class="line">&lt;/ul&gt;</span><br></pre></td></tr></table></figure>
<p>在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。</p>
<p>不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。</p>
<h3 id="v-for使用一个范围值"><a href="#v-for使用一个范围值" class="headerlink" title="v-for使用一个范围值"></a>v-for使用一个范围值</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">  &lt;span v-for=&quot;n in 10&quot;&gt;&#123;&#123; n &#125;&#125; &lt;/span&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">//返回1~10</span><br></pre></td></tr></table></figure>
<h2 id="变更方法"><a href="#变更方法" class="headerlink" title="变更方法"></a>变更方法</h2><p>变更方法，顾名思义，会变更调用了这些方法的原始数组。<br>Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">包括：</span><br><span class="line">push() </span><br><span class="line">pop()</span><br><span class="line">shift()</span><br><span class="line">unshift()</span><br><span class="line">splice()</span><br><span class="line">sort()</span><br><span class="line">reverse()</span><br></pre></td></tr></table></figure>
<h3 id="替换数组"><a href="#替换数组" class="headerlink" title="替换数组"></a>替换数组</h3><p>filter()、concat() 和 slice()<br>它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：</p>
<h1 id="例子-手动添加或删除一个节点"><a href="#例子-手动添加或删除一个节点" class="headerlink" title="例子:手动添加或删除一个节点"></a>例子:手动添加或删除一个节点</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=&quot;todo-list-example&quot;&gt;</span><br><span class="line">  &lt;form v-on:submit.prevent=&quot;addNewTodo&quot;&gt;</span><br><span class="line">    &lt;label for=&quot;new-todo&quot;&gt;Add a todo&lt;/label&gt;</span><br><span class="line">    &lt;input</span><br><span class="line">      v-model=&quot;newTodoText&quot;</span><br><span class="line">      id=&quot;new-todo&quot;</span><br><span class="line">      placeholder=&quot;E.g. Feed the cat&quot;</span><br><span class="line">    &gt;</span><br><span class="line">    &lt;button&gt;Add&lt;/button&gt;</span><br><span class="line">  &lt;/form&gt;</span><br><span class="line">  &lt;ul&gt;</span><br><span class="line">    &lt;li</span><br><span class="line">      is=&quot;todo-item&quot;</span><br><span class="line">      v-for=&quot;(todo, index) in todos&quot;</span><br><span class="line">      v-bind:key=&quot;todo.id&quot;</span><br><span class="line">      v-bind:title=&quot;todo.title&quot;</span><br><span class="line">      v-on:remove=&quot;todos.splice(index, 1)&quot;</span><br><span class="line">    &gt;&lt;/li&gt;</span><br><span class="line">  &lt;/ul&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(&#x27;todo-item&#x27;, &#123;</span><br><span class="line">  template: &#x27;\</span><br><span class="line">    &lt;li&gt;\</span><br><span class="line">      &#123;&#123; title &#125;&#125;\</span><br><span class="line">      &lt;button v-on:click=&quot;$emit(\&#x27;remove\&#x27;)&quot;&gt;Remove&lt;/button&gt;\</span><br><span class="line">    &lt;/li&gt;\</span><br><span class="line">  &#x27;,</span><br><span class="line">  props: [&#x27;title&#x27;]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">new Vue(&#123;</span><br><span class="line">  el: &#x27;#todo-list-example&#x27;,</span><br><span class="line">  data: &#123;</span><br><span class="line">    newTodoText: &#x27;&#x27;,</span><br><span class="line">    todos: [</span><br><span class="line">      &#123;</span><br><span class="line">        id: 1,</span><br><span class="line">        title: &#x27;Do the dishes&#x27;,</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        id: 2,</span><br><span class="line">        title: &#x27;Take out the trash&#x27;,</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        id: 3,</span><br><span class="line">        title: &#x27;Mow the lawn&#x27;</span><br><span class="line">      &#125;</span><br><span class="line">    ],</span><br><span class="line">    nextTodoId: 4</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    addNewTodo: function () &#123;</span><br><span class="line">      this.todos.push(&#123;</span><br><span class="line">        id: this.nextTodoId++,</span><br><span class="line">        title: this.newTodoText</span><br><span class="line">      &#125;)</span><br><span class="line">      this.newTodoText = &#x27;&#x27;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h1 id="事件处理"><a href="#事件处理" class="headerlink" title="事件处理"></a>事件处理</h1><h2 id="方法绑定，并传参"><a href="#方法绑定，并传参" class="headerlink" title="方法绑定，并传参"></a>方法绑定，并传参</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=&quot;example-3&quot;&gt;</span><br><span class="line">  &lt;button v-on:click=&quot;say(&#x27;hi&#x27;)&quot;&gt;Say hi&lt;/button&gt;</span><br><span class="line">  &lt;button v-on:click=&quot;say(&#x27;what&#x27;)&quot;&gt;Say what&lt;/button&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">new Vue(&#123;</span><br><span class="line">  el: &#x27;#example-3&#x27;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    say: function (message) &#123;</span><br><span class="line">      alert(message)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法:</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;button v-on:click=&quot;warn(&#x27;Form cannot be submitted yet.&#x27;, $event)&quot;&gt;</span><br><span class="line">  Submit</span><br><span class="line">&lt;/button&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">// ...</span><br><span class="line">methods: &#123;</span><br><span class="line">  warn: function (message, event) &#123;</span><br><span class="line">    // 现在我们可以访问原生事件对象</span><br><span class="line">    if (event) &#123;</span><br><span class="line">      event.preventDefault()</span><br><span class="line">    &#125;</span><br><span class="line">    alert(message)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="事件修饰符"><a href="#事件修饰符" class="headerlink" title="事件修饰符"></a>事件修饰符</h2><h3 id="v-on的修饰符"><a href="#v-on的修饰符" class="headerlink" title="v-on的修饰符"></a>v-on的修饰符</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.stop  --阻止点击事件冒泡</span><br><span class="line">.prevent  --阻止默认事件</span><br><span class="line">.capture  --在捕获阶段触发事件</span><br><span class="line">.self  --只会触发自己范围内的事件，不包含子元素</span><br><span class="line">.once  --只执行一次，如果我们在@click事件上添加.once修饰符，只要点击按钮只会执行一次。</span><br><span class="line">.passive  --是不拦截默认事件</span><br></pre></td></tr></table></figure>
<p>不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 阻止单击事件继续传播 --&gt;</span><br><span class="line">//阻止冒泡</span><br><span class="line">&lt;a v-on:click.stop=&quot;doThis&quot;&gt;&lt;/a&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 提交事件不再重载页面 --&gt;</span><br><span class="line">//阻止默认事件</span><br><span class="line">&lt;form v-on:submit.prevent=&quot;onSubmit&quot;&gt;&lt;/form&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 修饰符可以串联 --&gt;</span><br><span class="line">&lt;a v-on:click.stop.prevent=&quot;doThat&quot;&gt;&lt;/a&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 只有修饰符 --&gt;</span><br><span class="line">&lt;form v-on:submit.prevent&gt;&lt;/form&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 添加事件监听器时使用事件捕获模式 --&gt;</span><br><span class="line">&lt;!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --&gt;</span><br><span class="line">&lt;div v-on:click.capture=&quot;doThis&quot;&gt;...&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 只当在 event.target 是当前元素自身时触发处理函数 --&gt;</span><br><span class="line">&lt;!-- 即事件不是从内部元素触发的 --&gt;</span><br><span class="line">&lt;div v-on:click.self=&quot;doThat&quot;&gt;...&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p>使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。</p>
<h2 id="按键修饰符"><a href="#按键修饰符" class="headerlink" title="按键修饰符"></a>按键修饰符</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">.enter</span><br><span class="line">.tab</span><br><span class="line">.delete(捕获“删除”和“退格”键)</span><br><span class="line">.esc</span><br><span class="line">.space</span><br><span class="line">.up</span><br><span class="line">.down</span><br><span class="line">.left</span><br><span class="line">.right</span><br></pre></td></tr></table></figure>
<p>有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。<br>你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">// 可以使用 `v-on:keyup.f1`</span><br><span class="line">Vue.config.keyCodes.f1 = 112</span><br></pre></td></tr></table></figure>
<h3 id="keyup-enter"><a href="#keyup-enter" class="headerlink" title="keyup.enter"></a>keyup.enter</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --&gt;</span><br><span class="line">&lt;input v-on:keyup.enter=&quot;submit&quot;&gt;</span><br></pre></td></tr></table></figure>
<h3 id="按键码"><a href="#按键码" class="headerlink" title="按键码"></a>按键码</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input v-on:keyup.13=&quot;submit&quot;&gt;</span><br></pre></td></tr></table></figure>
<p>keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。</p>
<h2 id="系统修饰键"><a href="#系统修饰键" class="headerlink" title="系统修饰键"></a>系统修饰键</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">● .ctrl</span><br><span class="line">● .alt</span><br><span class="line">● .shift</span><br><span class="line">● .meta</span><br></pre></td></tr></table></figure>
<p>注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- Alt + C --&gt;</span><br><span class="line">&lt;input v-on:keyup.alt.67=&quot;clear&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- Ctrl + Click(点击) --&gt;</span><br><span class="line">&lt;div v-on:click.ctrl=&quot;doSomething&quot;&gt;Do something&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h2 id="exact修饰符"><a href="#exact修饰符" class="headerlink" title=".exact修饰符"></a>.exact修饰符</h2><p>.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 即使 Alt 或 Shift 被一同按下时也会触发 --&gt;</span><br><span class="line">&lt;button v-on:click.ctrl=&quot;onClick&quot;&gt;A&lt;/button&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 有且只有 Ctrl 被按下的时候才触发 --&gt;</span><br><span class="line">&lt;button v-on:click.ctrl.exact=&quot;onCtrlClick&quot;&gt;A&lt;/button&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 没有任何系统修饰符被按下的时候才触发 --&gt;</span><br><span class="line">&lt;button v-on:click.exact=&quot;onClick&quot;&gt;A&lt;/button&gt;</span><br></pre></td></tr></table></figure>
<h2 id="鼠标按钮修饰符"><a href="#鼠标按钮修饰符" class="headerlink" title="鼠标按钮修饰符"></a>鼠标按钮修饰符</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">● .left</span><br><span class="line">● .right</span><br><span class="line">● .middle</span><br></pre></td></tr></table></figure>
<h1 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h1><p>你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。v-model本质上就是一个语法糖。<br>v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。</p>
<p>v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：<br>● text 和 textarea 元素使用 value property 和 input 事件；<br>● checkbox 和 radio 使用 checked property 和 change 事件；<br>● select 字段将 value 作为 prop 并将 change 作为事件。</p>
<p>对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。</p>
<h2 id="双向绑定"><a href="#双向绑定" class="headerlink" title="双向绑定"></a>双向绑定</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;input v-model=&quot;message&quot; placeholder=&quot;edit me&quot;&gt;</span><br><span class="line">&lt;p&gt;Message is: &#123;&#123; message &#125;&#125;&lt;/p&gt;</span><br></pre></td></tr></table></figure>
<p>在文本区域插值 (<textarea></textarea>) 并不会生效，应用 v-model 来代替(即改变他的value值)。</p>
<h2 id="复选框"><a href="#复选框" class="headerlink" title="复选框"></a>复选框</h2><p>v-model=”checked”在这里代替了checked属性</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- id属性用来匹配label标签 --&gt;</span><br><span class="line">    &lt;input type=&quot;checkbox&quot; v-model=&quot;checked&quot; id=&quot;box&quot;&gt;</span><br><span class="line">    &lt;!-- for属性用匹配input标签 --&gt;</span><br><span class="line">    &lt;label for=&quot;box&quot;&gt;&#123;&#123;checked&#125;&#125;&lt;/label&gt;</span><br></pre></td></tr></table></figure>
<h2 id="多个复选框绑定同一个数组"><a href="#多个复选框绑定同一个数组" class="headerlink" title="多个复选框绑定同一个数组"></a>多个复选框绑定同一个数组</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 当checked的值为true（选中时）时，v-model会将value的值保存到checkedNames中 --&gt;</span><br><span class="line">    &lt;input type=&quot;checkbox&quot; id=&quot;jack&quot; value=&quot;Jack&quot; v-model=&quot;checkedNames&quot;&gt;</span><br><span class="line">    &lt;label for=&quot;jack&quot;&gt;Jack&lt;/label&gt;</span><br><span class="line">    &lt;input type=&quot;checkbox&quot; id=&quot;john&quot; value=&quot;John&quot; v-model=&quot;checkedNames&quot;&gt;</span><br><span class="line">    &lt;label for=&quot;john&quot;&gt;John&lt;/label&gt;</span><br><span class="line">    &lt;input type=&quot;checkbox&quot; id=&quot;mike&quot; value=&quot;Mike&quot; v-model=&quot;checkedNames&quot;&gt;</span><br><span class="line">    &lt;label for=&quot;mike&quot;&gt;Mike&lt;/label&gt;</span><br><span class="line">    &lt;br&gt;</span><br><span class="line">    &lt;span&gt;Checked names: &#123;&#123; checkedNames &#125;&#125;&lt;/span&gt;</span><br></pre></td></tr></table></figure>
<h2 id="单选框"><a href="#单选框" class="headerlink" title="单选框"></a>单选框</h2><p>可以通过v-for动态渲染option选项</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 当selected绑定了v-model后，会在每一次选择完毕时将选项的value值给v-model绑定的变量 --&gt;</span><br><span class="line">//再给selected标签添加一个multiple 属性后就可以多选了，通过按下ctrl键后就可以选择多个</span><br><span class="line">    &lt;select name=&quot;&quot; v-model=&quot;selected&quot; id=&quot;&quot;&gt;</span><br><span class="line">      &lt;!-- disabled选项被设置为不可选 --&gt;</span><br><span class="line">      &lt;option value=&quot;请选择&quot; disabled&gt;hh&lt;/option&gt;</span><br><span class="line">      &lt;option value=&quot;11&quot;&gt;1&lt;/option&gt;</span><br><span class="line">      &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;</span><br><span class="line">      &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;</span><br><span class="line">    &lt;/select&gt;</span><br><span class="line">    &lt;span&gt;Selected: &#123;&#123; selected &#125;&#125;&lt;/span&gt;</span><br></pre></td></tr></table></figure>
<p>如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。</p>
<h2 id="单选按钮"><a href="#单选按钮" class="headerlink" title="单选按钮"></a>单选按钮</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- v-model绑定同一个变量时，这些单选按钮才会互斥 --&gt;</span><br><span class="line">    &lt;!-- 点选按钮被点击后，会将value的值给v-model绑定的变量 --&gt;</span><br><span class="line">    &lt;input type=&quot;radio&quot; id=&quot;one&quot; value=&quot;O阿松大ne&quot; v-model=&quot;picked&quot;&gt;</span><br><span class="line">    &lt;label for=&quot;one&quot;&gt;One&lt;/label&gt;</span><br><span class="line">    &lt;br&gt;</span><br><span class="line">    &lt;input type=&quot;radio&quot; id=&quot;two&quot; value=&quot;Two&quot; v-model=&quot;picked&quot;&gt;</span><br><span class="line">    &lt;label for=&quot;two&quot;&gt;Two&lt;/label&gt;</span><br><span class="line">    &lt;br&gt;</span><br><span class="line">    &lt;span&gt;Picked: &#123;&#123; picked &#125;&#125;&lt;/span&gt;</span><br></pre></td></tr></table></figure>
<h2 id="（v-model的）修饰符"><a href="#（v-model的）修饰符" class="headerlink" title="（v-model的）修饰符"></a>（v-model的）修饰符</h2><p>.lazy  –change 事件_之后_进行同步数据<br>.number  –自动将用户的输入值转为数值类型<br>.trim  –自动过滤用户输入的首尾空白字符</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">//实时更新span中的信息</span><br><span class="line">&lt;span&gt;&#123;&#123;msg&#125;&#125;&lt;/span&gt;</span><br><span class="line">&lt;input type=&quot;text&quot; v-model=&quot;msg&quot; name=&quot;&quot; id=&quot;&quot;&gt;</span><br><span class="line">  //当焦点不在input上时更新</span><br><span class="line">&lt;span&gt;&#123;&#123;msg&#125;&#125;&lt;/span&gt;</span><br><span class="line">&lt;input type=&quot;text&quot; v-model.lazy=&quot;msg&quot; name=&quot;&quot; id=&quot;&quot;&gt;</span><br><span class="line">  //如果用户输入的是一个数字字符串，则转换成number类型</span><br><span class="line">&lt;input v-model.number=&quot;age&quot; type=&quot;number&quot;&gt;</span><br><span class="line">  //自动去除首尾空白</span><br><span class="line">  &lt;input v-model.trim=&quot;msg&quot;&gt;</span><br></pre></td></tr></table></figure>
<h1 id="package-json中的浏览器集合browserslist"><a href="#package-json中的浏览器集合browserslist" class="headerlink" title="package.json中的浏览器集合browserslist"></a>package.json中的浏览器集合browserslist</h1><p>browserslist 目标浏览器集合 （交集） 可以在这里设置需要兼容的框架（浏览器）<br>“&gt; 1%”,   市场占有率大于1%(可自定义区间) —&gt;  数据来源于Can I use平台<br>“last 2 versions”,   浏览器的最近两个大版本（可以自定义） “last 1 version”<br>“not dead”  五年之内没有更新就是dead</p>
<p>第三方工具包 npx browserslist “last 2 versions”  运行后返回符合的浏览器版本<br>npx 是npm这个工具自带的一个命令<br>npx 运行一个包时，他会去当前目录下去查找又没有这个包，有就从当前目录下运行，没有则帮我们自动下载</p>
<h1 id="在父组件中拿到event事件对象"><a href="#在父组件中拿到event事件对象" class="headerlink" title="在父组件中拿到event事件对象"></a>在父组件中拿到event事件对象</h1><p>父子组件传参，子组件向父组件通过emit（）传参后，父组件可以在事件处理函数中直接打印event对象，如果在事件处理函数中的形参是event，那么这个event会被认为是一个变量，。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2022/03/16/%E7%BB%83%E4%B9%A0%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%EF%BC%8C%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93%EF%BC%8C%E8%A1%A8%E5%8D%95%EF%BC%8C%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9/" data-id="cl0utkqfk0000eww64mowh3bd" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2022/03/16/%E4%BA%86%E8%A7%A3vue%E7%BB%84%E4%BB%B6/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          了解vue组件
        
      </div>
    </a>
  
  
    <a href="/2022/03/15/vue%E5%88%9D%E6%AD%A5%E4%BA%86%E8%A7%A3/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">vue初步了解</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/03/">March 2022</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2022/03/23/vuex%E5%AD%A6%E4%B9%A0/">vuex学习</a>
          </li>
        
          <li>
            <a href="/2022/03/22/vuew-router%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/">vuew-router的基本使用</a>
          </li>
        
          <li>
            <a href="/2022/03/22/vue-router%E7%9A%84%E5%88%9B%E5%BB%BA%E8%BF%87%E7%A8%8B/">vue-router的创建过程</a>
          </li>
        
          <li>
            <a href="/2022/03/20/axios%E5%AD%A6%E4%B9%A0/">axios学习</a>
          </li>
        
          <li>
            <a href="/2022/03/16/%E4%BA%86%E8%A7%A3vue%E7%BB%84%E4%BB%B6/">了解vue组件</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2022 诶无痕和诶有痕<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">

  
<script src="/fancybox/jquery.fancybox.pack.js"></script>




<script src="/js/script.js"></script>




  </div>
</body>
</html>